<template>
  <div>
    <Breadcrumbs title="Store" />
    <div class="flex container px-4 mb-10">
      <nav class="w-[310px] hidden lg:block flex-shrink-0 mr-10">
        <Classify :navList="navArr" @classify="classify"></Classify>
      </nav>
      <main class="flex-1 min-h-screen h-full">
        <div
          class="block sm:flex items-center sm:space-x-5 space-y-5 sm:space-y-0 text-sm flex-wrap"
        >
          <div class="flex space-x-5" @click="changePrice">
            <div
              class="text-black-70 text-sm flex items-center cursor-pointer select-none"
            >
              <span>Price</span>
              <div class="w-5 ml-2.5">
                <svg
                  viewBox="0 0 6 5"
                  :class="[
                    'block w-2.5 h-1.5 mb-1',
                    { 'text-yellow': type == 1 },
                  ]"
                  fill="currentColor"
                >
                  <path
                    d="M3.82219 0.687612C3.42454 0.113225 2.57546 0.113224 2.17781 0.687611L0.336377 3.34746C-0.122783 4.01069 0.351906 4.91667 1.15857 4.91667H4.84143C5.64809 4.91667 6.12278 4.01069 5.66362 3.34746L3.82219 0.687612Z"
                  ></path>
                </svg>
                <svg
                  viewBox="0 0 6 5"
                  :class="[
                    'block w-2.5 h-1.5 transform rotate-180',
                    { 'text-yellow': type == 2 },
                  ]"
                  fill="currentColor"
                >
                  <path
                    d="M3.82219 0.687612C3.42454 0.113225 2.57546 0.113224 2.17781 0.687611L0.336377 3.34746C-0.122783 4.01069 0.351906 4.91667 1.15857 4.91667H4.84143C5.64809 4.91667 6.12278 4.01069 5.66362 3.34746L3.82219 0.687612Z"
                  ></path>
                </svg>
              </div>
            </div>
            <div
              class="flex-1 text-right flex justify-end items-center lg:hidden text-black-50"
            >
              <button class="w-5 h-5">
                <span class="sr-only">Filters</span
                ><svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
                  ></path>
                </svg>
              </button>
            </div>
          </div>
          <div class="flex">
            <div class="relative rounded-full lg:min-w-[300px] w-full flex-1">
              <div
                class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  class="h-5 w-5 text-black-70"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                  ></path>
                </svg>
              </div>
              <input
                type="search"
                name="search"
                id="search"
                class="focus:ring-yellow focus:border-yellow block w-full border-none bg-black-6 pl-10 sm:text-sm rounded-lg h-[40px]"
                v-model="goodsName"
              />
            </div>
            <button
              type="button"
              class="rounded no-underline border flex items-center justify-center shadow text-black-85 border-transparent hover:bg-yellow-light active:shadow-yellow py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary h-10 rounded-lg ml-2"
              @click="search()"
            >
              <div>Search</div>
              <!---->
            </button>
          </div>
          <div class="text-sm text-black-70">
            All <span class="text-yellow">{{ proList.length }}</span> products
          </div>
        </div>
        <div class="h-full mt-10">
          <div class="w-full grid grid-cols-2 gap-2 md:grid-cols-3 md:gap-10">
            <ProductItem
              v-show="proList.length > 0"
              v-for="(item, index) in proList"
              :proItem="item"
            ></ProductItem>
          </div>
          <!----><!---->
        </div>
        <div class="flex" v-show="proList.length == 0">
          <div class="m-auto">
            <img
              src="https://www.lucksec.cn/img/t-shirt.c3aeb218.svg"
              width="200"
              alt=""
            />
            <div>暂时没找到任何商品哦~</div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import Classify from "./components/classify.vue";
import ProductItem from "./components/productItem.vue";
import Breadcrumbs from "@/components/Breadcrumbs/index.vue";
export default {
  components: { Classify, ProductItem, Breadcrumbs },
  data() {
    return {
      navArr: [],
      proList: [],
      type: 3,
      goodsName: "",
      goodcategory_id: "0",
      page: "1",
      noneGoods: false,
    };
  },
  created() {
    this.$api.getShopsy().then((res) => {
      this.navArr = res.data.data;
    });
    this.getShopsList();
  },
  methods: {
    getShopsList() {
      this.$api
        .getShops({
          type: this.type,
          goods_name: this.goodsName,
          goodcategory_id: this.goodcategory_id,
          p: this.page,
        })
        .then((res) => {
          this.proList = res.data.data ?? [];
        });
    },
    // 搜索
    search() {
      this.getShopsList();
    },
    // 分类
    classify(val) {
      this.goodcategory_id = val;
      this.getShopsList();
    },
    // 价格排序
    changePrice() {
      // if (this.type == 3) {
      //   this.type = 1
      // } else {
      //   this.type++
      // }
      this.type = (this.type % 3) + 1;
      this.getShopsList();
    },
  },
};
</script>
<style lang="" scoped></style>
